<template>
    <baseView>
        <div class="cleanRoute">
            <DataTableV2 :fetchApi="cleanByRoute" :params="params" :size="[15, 20, 30]" :tableColumn="tableColumn"
                ref="tableRef">
                <!-- 查询 -->
                <template #search>
                    <div class="form-box">
                        <el-form :inline="true">
                            <el-form-item label="清运路线">
                                <routeSelect v-model:selectValue="params.routeid"> </routeSelect>
                            </el-form-item>
                            <el-form-item label="日期">
                                <el-date-picker v-model="params.date" type="date" value-format="YYYY-MM-DD" />
                            </el-form-item>
                            <el-form-item label="时间段">
                                <el-select v-model="params.time" placeholder="请选择" style="width: 100px;">
                                    <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="垃圾类型">
                                        <el-select v-model="params.type" placeholder="请选择" style="width: 120px;"
                                            clearable>
                                            <el-option v-for="item in rubbishOption" :key="item.value"
                                                :label="item.text" :value="item.value" />
                                        </el-select>
                                    </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">
                                    <el-icon style="margin-right: 2px;">
                                        <Search />
                                    </el-icon>查询
                                </el-button>
                                <el-button type="primary" plain>重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>

                <!-- 清运状态 -->
                <template #status="{ row }">
                    <cleanTag :row="row"/>
                </template>
                <template #路段名称="{ row }">
                    {{ getRouteName(row) }}
                </template>
                <template #plannum="{ row }">
                    {{ row['计划桶数'] }} 桶 {{ row['计划重量'] }} kg
                </template>
                <template #realnum="{ row }">
                    {{ row['实际桶数'] }} 桶 {{ row['实际重量'] }} kg
                </template>
            </DataTableV2>
        </div>
    </baseView>
</template>

<script setup>
import { cleanByRoute, routeList } from "@/api/cleanRoute"
import dayjs from "dayjs"
import { nextTick, onMounted } from "vue";
const tableRef = ref(null)
const params = reactive({
    pagenum: 1,
    pagesize: 15,
    date: dayjs().format("YYYY-MM-DD"),
    routeid: "",
    time: "am",
})
const tableColumn = ref([
    {
        label: '路段名称',
        prop: '路线名称',
        width:"300"
    },
    {
        label: '商铺名称',
        prop: '店铺名',
    },
    {
        label: '垃圾类型',
        prop: 'type',
    },
    {
        label: '计划清运时间',
        prop: 'plantime',

    },
    {
        label: '计划清运数量',
        prop: 'plannum',
        slot: true
    },
    {
        label: '清运状态',
        prop: 'status',
        slot: true
    },
    {
        label: '实际清运时间',
        prop: 'realtime',
    },
    {
        label: '实际清运数量',
        prop: 'realnum',
        slot: true,
    },
    {
        label: '作业人员',
        prop: 'worker',
    }

])
const timeOptions = [
    {
        id: 1,
        label: '上午',
        value: "am"
    },
    {
        id: 2,
        label: '下午',
        value: "pm"
    }
]


function search() {
    tableRef.value.fetchList()
}
const routeInfo = ref([])
function getRouteName(row) {
    let target = {}
    routeInfo.value.forEach(item => {
        if (params.routeid == item.routeid) {
            target = item
        }
    })
    return target.name
}

const rubbishOption = [
    {
        text: "干垃圾",
        value: "dry"
    },
    {
        text: "湿垃圾",
        value: "wet"
    },
    {
        text: "餐厨垃圾",
        value: "food"
    }
]


onMounted(() => {
    routeList().then(res => {
        if (res.code == 200) {
            routeInfo.value = res.data
        }
    })
})

</script>

<style lang="scss" scoped>
.cleanRoute {
    height: 100%;
    width: 100%;
    position: relative;
}

.form-box {
    display: flex;
    justify-content: flex-end;
}

.paginStyle {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

}
</style>